<template>
  <cover-view class="popup-container" @click="close" v-show="show">
    <cover-image :class="['popup-main', {hide: isHide}]" :src="staticImgs.bg" v-show="show" />
    <cover-view :class="['popup-main', {hide: isHide}]" :style="{zIndex: 9999}" v-show="show">
      <cover-view class="popup-inner" @click.stop>
        <cover-view class="popup-title flex-cc">
          <cover-view class="before" />
          <button class="popup-title-text">免费</button>
          <cover-view class="after" />
        </cover-view>
        <cover-view class="subtitle">获得专业心理咨询师的报告解读服务<cover-view class="kb" /></cover-view>
        <cover-view class="time">（30分钟）</cover-view>
        <cover-view class="content">真实专业国家认证心理咨询师专业知识支持，保护用户隐私</cover-view>
        <cover-view :class="['checkbox-row flex', {checked}]" @click.stop="checked = !checked">
          <cover-view class="checkbox flex-cc">
            <cover-view class="checkbox-selected" />
          </cover-view>
          <cover-view class="checkbox-text">我已年满18周岁，若未满18周岁暂无法接受我们的服务</cover-view>
        </cover-view>
        <cover-view class="submit-btn flex-cc">
          <cover-image class="submit-btn-img" :src="staticImgs.btn" />
          <button class="submit-btn-text flex-cc" @click.stop="toExplanationDetail">领取免费福利<cover-view class="kb" /></button>
        </cover-view>
        <cover-view class="cancel-btn" @click.stop="close">稍后领取（一个月内有效）</cover-view>
      </cover-view>
    </cover-view>
  </cover-view>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    isHome: {
      // 是否为首页
      type: Boolean,
      default: false
    },
    isResult: {
      // 是否为结果页
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false,
      checked: false,
      staticImgs: {
        bg: this.imgBaseURL + '/explanation/popup_bg.png',
        btn: this.imgBaseURL + '/explanation/popup_btn.png'
      },
      isHide: true,
      lock: true
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.show = val
        if (val) {
          this.isHide = true
          this.lock = true
          this.$nextTick(() => {
            this.isHide = false
            setTimeout(() => {
              this.lock = false
            }, 500)
          })
        } else {
          this.isHide = true
        }
        if (val && this.isHome) {
          // 当天弹过
          uni.setStorageSync('explanationOrderModalShowed', this.$dayjs().format('YYYY-MM-DD'))
        }
      }
    }
  },
  methods: {
    close() {
      if (this.lock) {
        return
      }
      this.isHide = true
      this.show = false
      this.$emit('input', false)
    },
    toExplanationDetail() {
      if (!this.checked) {
        this.$showToast('请确认是否已满18周岁')
        return
      }
      // 预约订单
      uni.navigateTo({
        url: '/subcontractorA/explanationOrder/explanationOrder',
        success: () => {
          this.close()
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.popup-container {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background-color: rgba(50, 50, 50, 0.7);
}

.popup-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 1090rpx;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  z-index: 2;
  // transition: transform 0.3s linear;
  // transform: translateY(0);

  // &.hide {
  //   transform: translateY(-1300rpx);
  // }
}

.popup-inner {
  margin-top: 280rpx;
  width: 540rpx;
  height: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup-title {
  font-weight: bold;
  font-size: 60rpx;
  color: #915E16;
  line-height: 84rpx;
  margin-top: 160rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 84rpx;

  .before, .after {
    width: 50rpx;
    height: 6rpx;
    background-color: rgba(145, 94, 22, 0.61);
    margin: 0 28rpx;
  }

  .popup-title-text {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 84rpx;
    font-weight: bold;
    font-size: 60rpx;
    color: #915E16;
    text-align: center;
    background-color: transparent;
    height: 84rpx;

    &::after {
      display: none;
    }
  }
}

.subtitle {
  font-weight: bold;
  font-size: 27rpx;
  color: #915E16;
  line-height: 38rpx;
  margin: 12rpx 0;
  overflow: visible;
  white-space: nowrap;
  width: 100%;
  text-align: center;
}

.time {
  font-weight: bold;
  font-size: 40rpx;
  color: #915E16;
  line-height: 56rpx;
}

.content {
  font-size: 24rpx;
  color: #FFF;
  line-height: 40rpx;
  margin: 12rpx 0 50rpx;
  width: 312rpx;
  white-space: normal;
}

.checkbox-row {
  .checkbox {
    width: 20rpx;
    height: 20rpx;
    border: 1rpx solid #915E16;
    border-radius: 50%;
    margin-top: 7rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .checkbox-selected {
      width: 10rpx;
      height: 10rpx;
      background-color: #83520E;
      display: none;
      border-radius: 50%;
    }
  }

  .checkbox-text {
    font-size: 24rpx;
    color: #915E16;
    line-height: 33rpx;
    margin-left: 7rpx;
    width: 458rpx;
    white-space: normal;
  }

  &.checked {
    .checkbox .checkbox-selected {
      display: block;
    }
  }
}

.submit-btn {
  margin: 20rpx 0;
  font-weight: bold;
  font-size: 34rpx;
  color: #875D1D;
  line-height: 48rpx;
  width: 312rpx;
  height: 80rpx;
  background: linear-gradient(to bottom, #FFFEFC, #F0B96A) center center / calc(100% - 2rpx) calc(100% - 2rpx), linear-gradient(to bottom, #F1F1F1, #F1DCAD) center center / 100% 100%;
  box-shadow: 0 5rpx 0 0 #CA8827;
  border-radius: 40rpx;
  position: relative;
}

.submit-btn-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.submit-btn-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-weight: bold;
  font-size: 34rpx;
  color: #875D1D;
  line-height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: transparent;
  overflow: visible;
  white-space: nowrap;

  &::after {
    display: none;
  }
}

.cancel-btn {
  font-size: 24rpx;
  color: #AD8353;
  line-height: 33rpx;
}

.kb {
  display: inline-block;
  line-height: 40rpx;
  width: 10rpx;
}
</style>